import React, { useState, useEffect } from "react";
import ReactECharts from "echarts-for-react";
import * as echarts from "echarts";
import { theme, Progress } from "antd";
import { ActiveRingChart } from "@jiaminghi/data-view-react";

function Firecontrol({ data }) {
  const [vs, setvs] = useState(false);
  const verb = data?.verb?.year ?? {};
  const verbm = data?.verb?.month ?? {};

  const {
    token: {
      colorBgContainer,
      colorTextBase,
      colorBgSecondary,
      colorPrimary,
      colorBgThird,
      colorBorder,
    },
  } = theme.useToken();

  const config = {
    lineWidth: 10,
    digitalFlopStyle: {
      fontSize: 16,
      fill: colorTextBase,
    },
    radius: "70%",
    activeRadius: "80%",
    data: [
      {
        name: "进行中",
        value: verb?.doing,
      },
      {
        name: "已完成",
        value: verb?.done,
      },
      {
        name: "未开始",
        value: verb?.undo,
      },
    ],
    color: ["#FFC000", "#009EF1", "#00DFCF"],
  };

  return (
    <div style={{ flex: 1, overflow: "hidden" }} className="center">
      <div style={{ flex: 1, fontSize: 14 }}>
        <span>本月维保</span>
        <Progress
          percent={parseInt(
            (verbm?.done * 100) / (verbm.done + verbm.doing + verbm.done)
          )}
        ></Progress>
        <span>本年维保</span>
        <Progress
          percent={parseInt(
            (verb?.done * 100) / (verb.done + verb.doing + verb.done)
          )}
        ></Progress>
      </div>
      <div style={{ width: 100, height: 100 }} className="center">
        <ActiveRingChart
          config={config}
          style={{ width: "100%", height: "100%" }}
        />
      </div>
    </div>
  );
}

export default Firecontrol;
